<template>
	<view class="container">
		<view class="top-box">
			<view class="more-menu" @tap="goGroupMember">
				<image src="../../static/images/more_menu.png"></image>
			</view>
		</view>
		<scroll-view scroll-y="true" @scrolltoupper="fetchData" @scroll="scrollChange" :scroll-top="scrollTop" :style="{height: contentHeight + 'px'}">
			<view class="list-box">
				<view class="loading" v-show="loading">拼命加载中...</view>
				<view class="list-item" v-for="(item,index) in showDataList" :key="index">
					<view class="item-bottom" v-if="item.isShowTime == 1">{{item.time}}</view>
					<view class="item-top" v-if="item.isSelf == 0">
						<view class="item-top-avatar" @tap="goInfo(item.uid, item.identity)">
							<image :src="item.avatar"></image>
						</view>
						<view class="item-top-info">
							<view class="item-name">{{item.name}}</view>
							<view class="item-msg-box">{{item.msg}}</view>
						</view>
					</view>
					<view class="item-top-self" v-else>
						<view class="item-top-info-self">
							<view class="item-msg-box-self">{{item.msg}}</view>
						</view>
						<view class="item-top-avatar">
							<image :src="item.avatar"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="send-box">
			<view class="send-msg-box">
				<view class="input-box">
					<input class="uni-input" cursor-spacing="18" v-model="sendMsg" @focus="sendFocus" />
				</view>
				<view class="send-more" @tap="showSendMore">
					<image src="../../static/images/send_more.png"></image>
				</view>
				<view class="send-btn" @tap="doSend">发送</view>
			</view>
			<view class="send-more-box" v-show="isSendMore">
				<view class="more-item-list">
					<view class="more-item" @tap="selectFile">
						<image src="../../static/images/send_file.png"></image>
					</view>
					<view class="more-item" @tap="selectImg">
						<image src="../../static/images/send_pic.png"></image>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		http,
		showToastMsg,
		getTimeStr
	} from '../../utils'

	export default {
		data() {
			return {
				id: 0,
				universityId: 0,
				sendMsg: '',
				userInfo: null,
				scrollTop: 0,
				old: {
				  scrollTop: 0
				},
				contentHeight: 0,
				newHeight: 0,
				curPage: 1,
				pageSize: 40,
				totalDataList: [],
				showDataList: [],
				newDataList: [],
				isFinish: false,
				loading: false,
				storageKey: '',
				isSendMore: false
			}
		},

		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			if (options.uid) {
				this.universityId = options.uid
			}
			this.getMaxHeight()
			this.userInfo = uni.getStorageSync('userInfo')
			if (!this.$websocket.state.webSocketIsOpen) {
				this.$websocket.commit('setUid', this.userInfo.userId)
				this.$websocket.commit('setSid', this.userInfo.userToken)
				this.$websocket.dispatch('webSocketInit')
			}
			this.storageKey = this.userInfo.userId + '_group_chat_' + this.id
			this.totalDataList = uni.getStorageSync(this.storageKey)
			if (!this.totalDataList) {
				this.totalDataList = []
				this.isFinish = true
			}
			if (this.totalDataList.length <= 0) {
				this.isFinish = true
			}
			this.fetchData()
		},

		computed: {
			revMsg() {
				return this.$websocket.getters.socketMsgs
			}
		},

		watch: {
			revMsg(val) {
				if (val.type == 3 && val.to == this.id && this.userInfo.userId != val.uid) {
					let msg = {
						uid: val.uid,
						identity: val.identity,
						isSelf: val.isSelf,
						name: val.name,
						avatar: val.avatar,
						msg: val.content,
						timestamp: val.timestamp,
						isShowTime: val.isShowTime
					}
					msg.time = getTimeStr(val.timestamp)
					this.showDataList.push(msg)
					this.toBottom()
				}
			}
		},

		methods: {
			
			goGroupMember() {
				uni.navigateTo({
					url: '/pages/group_member/group_member'
				})
			},
			
			selectFile() {
				wx.chooseMessageFile({
					success(res) {
						console.log(res)
					}
				})
			},
			
			selectImg() {
				uni.chooseImage({
					success(res) {
						console.log(res)
					}
				})
			},
			
			showSendMore() {
				this.isSendMore = !this.isSendMore
			},
			
			scrollChange(e) {
				this.old.scrollTop = e.detail.scrollTop
				this.newHeight = e.detail.scrollHeight
			},
			
			getMaxHeight() {
				this.contentHeight = uni.getSystemInfoSync().windowHeight
			},
			
			toBottom() {
				const that = this
				that.$nextTick(function(){
					uni.createSelectorQuery().select('.list-box').boundingClientRect().exec(data => {
						that.scrollTop = data[0].height
					})
				})
			},
			
			sendFocus() {
				this.toBottom()
			},
			
			fetchData() {
				const that = this
				if (that.isFinish) {
					return
				}
				if (that.loading) {
					return
				}
				that.loading = true
				setTimeout(function() {
					let start = that.totalDataList.length - that.curPage * that.pageSize
					let end = start + that.pageSize
					if (start <= 0) {
						start = 0
						that.isFinish = true
					}
					let tempData = []
					for (let i = start; i < end; i++) {
						that.totalDataList[i].time = getTimeStr(that.totalDataList[i].timestamp)
						tempData.push(that.totalDataList[i])
					}
					that.showDataList = tempData.concat(that.showDataList)
					that.curPage++
					that.loading = false
					that.scrollTop = that.old.scrollTop
					that.$nextTick(function(){
						uni.createSelectorQuery().select('.list-box').boundingClientRect().exec(data => {
							that.scrollTop = data[0].height - that.newHeight
						})
					})
				}, 500)
			},

			doSend() {
				const that = this
				
				if (that.sendMsg.trim().length <= 0) {
					return
				}

				let timestamp = parseInt(new Date().getTime() / 1000)

				let data = {
					uid: that.userInfo.userId.toString(),
					sid: that.userInfo.userToken,
					type: 3,
					to: that.id,
					content: that.sendMsg,
					timestamp: timestamp
				}

				let msg = {
					uid: that.userInfo.userId,
					isSelf: 1,
					identity: that.userInfo.userType,
					name: that.userInfo.userName,
					avatar: that.userInfo.userAvatar,
					msg: that.sendMsg,
					timestamp: timestamp
				}

				if (that.newDataList.length > 0) {
					let newMsg = that.newDataList[that.newDataList.length - 1]
					if (timestamp - newMsg.timestamp >= 300) { // 现在要发送的消息和最近发送的一条消息的时间间隔超过5分钟
						data.isShowTime = 1
						msg.isShowTime = 1
					} else {
						data.isShowTime = 0
						msg.isShowTime = 0
					}
				} else if (that.totalDataList.length > 0) {
					let newMsg = that.totalDataList[that.totalDataList.length - 1]
					if (timestamp - newMsg.timestamp >= 300) { // 现在要发送的消息和最近发送的一条消息的时间间隔超过5分钟
						data.isShowTime = 1
						msg.isShowTime = 1
					} else {
						data.isShowTime = 0
						msg.isShowTime = 0
					}
				} else {
					data.isShowTime = 1
					msg.isShowTime = 1
				}
				msg.time = getTimeStr(timestamp)
				
				that.sendMsg = ''
				setTimeout(function() {
					that.sendMsg = ''
				}, 100)

				that.$websocket.commit('webSocketSend', data)

				that.showDataList.push(msg)
				that.newDataList.push(msg)
				that.toBottom()

				/* if (that.totalDataList.length >= 200) {
					that.totalDataList.splice(0, 1)
				}
				that.totalDataList.push(msg)
				uni.setStorageSync(that.storageKey, that.totalDataList) */
			},

			goEnrollmentPlan() {
				const that = this
				uni.navigateTo({
					url: '/pages/enrollment_plan_batch/enrollment_plan_batch?id=' + that.universityId
				})
			},

			goAdmissionData() {
				const that = this
				uni.navigateTo({
					url: '/pages/admission_data/admission_data?id=' + that.universityId
				})
			},

			goEnrollmentIntroduction() {
				const that = this
				uni.navigateTo({
					url: '/pages/enrollment_introduction_batch/enrollment_introduction_batch?id=' + that.universityId
				})
			},

			goMajorProbability() {
				const that = this
				uni.navigateTo({
					url: '/pages/major_probability/major_probability?id=' + that.id
				})
			},

			goInfo(id, identity) {
				if (identity == 1) {
					if (this.userInfo.userType > 1) {
						uni.navigateTo({
							url: '/pages/student_info/student_info?id=' + id
						})
					}
				} else if (identity == 2) {
					uni.navigateTo({
						url: '/pages/teacher_zone_index_other/teacher_zone_index_other?id=' + id
					})
				}
			}

		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		color: #333333;
	}
	
	.loading {
		width: 750rpx;
		height: 50rpx;
		color: #999999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.container {
		width: 750rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		z-index: 10;
	}

	.line {
		height: 2rpx;
		width: 700rpx;
		background-color: #f5f5f5;
		margin-top: 10rpx;
	}

	.nav-content {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-item-icon image {
		width: 50rpx;
		height: 50rpx;
	}

	.nav-item-label {
		font-size: 20rpx;
		color: #45d6b7;
	}

	.list-box {
		width: 750rpx;
		height: auto;
		z-index: 1;
		margin-bottom: 100rpx;
	}
	
	.list-box-no-margin {
		width: 700rpx;
		height: auto;
		z-index: 1;
		margin-bottom: 100rpx;
	}

	.list-item {
		margin-top: 20rpx;
	}

	.item-top {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-left: 20rpx;
	}

	.item-top-info {
		margin-left: 30rpx;
	}

	.item-name {
		font-size: 20rpx;
		color: #999999;
	}

	.item-msg-box {
		margin-top: 10rpx;
	}

	.item-bottom {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 60rpx;
		font-size: 20rpx;
		color: #999999;
	}

	.item-top-avatar image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 10rpx;
	}

	.item-msg-box {
		position: relative;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 24rpx;
		max-width: 460rpx;
	}

	.item-msg-box::before {
		position: absolute;
		content: "";
		width: 0;
		height: 0;
		right: 100%;
		top: 24rpx;
		border-top: 14rpx solid transparent;
		border-right: 20rpx solid #ffffff;
		border-bottom: 14rpx solid transparent;
	}

	.item-top-self {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		margin-right: 20rpx;
	}

	.item-msg-box-self {
		position: relative;
		background-color: #fe8d0b;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 24rpx;
		max-width: 460rpx;
		color: #ffffff;
	}

	.item-msg-box-self::after {
		position: absolute;
		content: "";
		width: 0;
		height: 0;
		left: 100%;
		top: 24rpx;
		border-top: 14rpx solid transparent;
		border-left: 20rpx solid #fe8d0b;
		border-bottom: 14rpx solid transparent;
	}

	.item-top-info-self {
		margin-right: 30rpx;
	}
	
	.send-box {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #f5f5f5;
		z-index: 1000;
	}
	
	.send-more-box {
		width: 750rpx;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 2rpx;
		border-top: 2rpx solid #eeeeee;
		padding-top: 38rpx;
	}
	
	.more-item-list {
		width: 654rpx;
		display: flex;
		flex-direction: row;
	}
	
	.more-item {
		margin-right: 58rpx;
	}
	
	.more-item image {
		width: 120rpx;
		height: 120rpx;
	}
	
	.send-more {
		margin-top: 14rpx;
		margin-left: 22rpx;
	}
	
	.send-more image {
		width: 54rpx;
		height: 54rpx;
	}
	
	.send-msg-box {
		width: 750rpx;
		height: 98rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-top: 2rpx solid #eeeeee;
	}
	
	.input-box {
		width: 470rpx;
		height: 60rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 20rpx;
	}
	
	.input-box input {
		font-size: 24rpx;
	}
	
	.send-btn {
		width: 120rpx;
		height: 60rpx;
		background-image: linear-gradient(90deg, #ff8806 0%, #fbae2b 100%), linear-gradient(#4685f8, #4685f8);
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #ffffff;
		margin-left: 20rpx;
		margin-top: 8rpx;
	}
	
	.top-box {
		width: 750rpx;
		background-color: #ffffff;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-start;
	}
	
	.more-menu {
		margin-right: 30rpx;
	}
	
	.more-menu image {
		width: 34rpx;
		height: 8rpx;
	}
</style>
